<template>
  <div class="DBSummary">
    <el-card>
      <div class="table-wrap">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="dimension_name"></el-table-column>
          <el-table-column label="PV">
            <el-table-column
              prop="wechat_pv"
              label="微信商用服务号">
            </el-table-column>
            <el-table-column
              prop="ent_wechat_pv"
              label="企业微信">
            </el-table-column>
            <el-table-column
              prop="dd_pv"
              label="钉钉">
            </el-table-column>
          </el-table-column>
          <el-table-column label="UV">
            <el-table-column
              prop="wechat_uv"
              label="微信商用服务号">
            </el-table-column>
            <el-table-column
              prop="ent_wechat_uv"
              label="企业微信">
            </el-table-column>
            <el-table-column
              prop="dd_uv"
              label="钉钉">
            </el-table-column>
          </el-table-column>
          <el-table-column label="平均访问时长">
            <el-table-column
              prop="wechat_visit_duration"
              label="微信商用服务号">
            </el-table-column>
            <el-table-column
              prop="ent_wechat_visit_duration"
              label="企业微信">
            </el-table-column>
            <el-table-column
              prop="dd_visit_duration"
              label="钉钉">
            </el-table-column>
          </el-table-column>
          <el-table-column label="跳出率">
            <el-table-column
              prop="wechat_retention_rate"
              label="微信商用服务号">
            </el-table-column>
            <el-table-column
              prop="ent_wechat_retention_rate"
              label="企业微信">
            </el-table-column>
            <el-table-column
              prop="dd_retention_rate"
              label="钉钉">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn-wrap">
        <el-button-group>
          <el-button :class="{'active-btn': currentIndex === 1}" @click="toggleIndex(1)">趋势分析</el-button>
          <el-button :class="{'active-btn': currentIndex === 2}" @click="toggleIndex(2)">页面上下游分析</el-button>
        </el-button-group>
      </div>
      <div class="select-wrap">
        <h3>趋势分析</h3>
        <div class="select-box box">
          <el-select v-model="value" placeholder="请选择"
                     @change="changeSelect">
            <el-option
              v-for="item in buttonArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="select-box box">
          <el-select v-model="value1" placeholder="请选择"
                     multiple
                     collapse-tags
                     @change="changeSelect1">
            <el-option
              v-for="item in buttonArr1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="time-box box">
          <el-date-picker
            v-model="timeValues"
            @change="changeTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('bidding.to')"
            :start-placeholder="$t('bidding.startTime')"
            :end-placeholder="$t('bidding.endTime')">
          </el-date-picker>
        </div>
      </div>
      <div class="eCharts-wrap">
        <div class="echarts-part">
          <div class="title">走势图</div>
          <div class="nodata" v-if="showNoData.lineECharts">No Data</div>
          <div class="chart lineECharts"  v-loading="loading.lineECharts"></div>
        </div>
        <div class="echarts-part">
          <div class="title">用户分布图</div>
          <div class="nodata" v-if="showNoData.barECharts">No Data</div>
          <div class="chart barECharts"  v-loading="loading.barECharts"></div>
        </div>
      </div>
      <div class="table-wrap-two">
        <el-table
          :data="tableData2"
          border
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <el-table-column
            prop="name"
            label="时间段">
          </el-table-column>
          <el-table-column
            prop="address"
            label="微信商用服务号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="企业微信">
          </el-table-column>
          <el-table-column
            prop="name"
            label="钉钉">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../../../utils/auth'
  import {getLineData,getBarData,WeChatAccountSearch} from '../api/eServiceSearch'
  import {getSevenDay} from '@/filters'
  export default {
    name: "DBSummary",
    data() {
      return {
        channel: [],
        testPort: '',
        getUrl: '../../../../static/json',
        currentIndex: 1,
        value: 'pv',
        value1: ['XLI4P384IX73','Y2LIKLE33860','3097KLN9URA0'],
        buttonArr:[
          {label:'PV',value:'pv'},
          {label:'UV',value:'uv'},
          {label:'平均访问时长',value:'avg'},
          {label:'跳出率',value:'bounce_rate'}
        ],
        buttonArr1:[
          {label:'微信商用服务号',value:'XLI4P384IX73'},
          {label:'企业微信',value:'Y2LIKLE33860'},
          {label:'钉钉',value:'3097KLN9URA0'}
        ],
        timeValues:getSevenDay(),
        echartsObj: {
          lineECharts:'',
          barECharts:''
        },
        loading:{
          lineECharts:false,
          barECharts:false
        },
        showNoData:{
          lineECharts:false,
          barECharts:false
        },
        tableData: [],
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        optionColors: ['#0090e9', '#6be6c1', '#59c4e6', '#ffb980', '#b692df']
      }
    },
    methods:{
      initEchartsDom() {
        this.echartsObj.lineECharts = this.echarts.init(document.getElementsByClassName('lineECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.barECharts = this.echarts.init(document.getElementsByClassName('barECharts')[0], null, {renderer: 'canvas'})
      },
      toggleIndex(index) {
        if (index === this.currentIndex) {
          return
        }
        this.currentIndex = index
      },
      //  echarts-module
      drawEcharts(paramsData,noData, echartsObj, echartsType, isSmooth,yAxisName,color) {
        if (paramsData.series.length !== 0) {
          let xAxisData = {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
            },
            axisLabel: {
              interval: 0,
              fontFamily: 'HelveticaNeue',
              fontSize: 10,
              color: '#999999'
            },
            data: paramsData.label.data
          }
          let series = paramsData.series.map(item =>{
            return {
              name: item.name,
              data: item.data,
              type: echartsType,
              barGap: 0,
              smooth: isSmooth,
              barMaxWidth: 30
            }
          })
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            color: color,
            xAxis: xAxisData,
            yAxis: {
              type: 'value',
              name: yAxisName,
              axisLabel: {
                fontFamily: 'HelveticaNeue',
                fontSize: 10,
                color: '#999999'
              },
              axisLine: {
                // show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: series
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      async getDataEchartsLine(params) {
        this.loading.lineECharts = true
        let res = await getLineData(params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.lineECharts = false
          this.drawEcharts(resData, 'lineECharts', this.echartsObj.lineECharts, 'line', true, '次数', this.optionColors)
        },0)
      },
      async getDataEchartsBar(params) {
        this.loading.barECharts = true
        let res = await getBarData(params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.barECharts = false
          this.drawEcharts(resData,'barECharts', this.echartsObj.barECharts, 'bar', false, '%', this.optionColors)
        },0)
      },
      loadAllCharts(){
        let params = {
          appKey:this.value1,
          channel:this.channel,
          traffic:[this.value],
          date:this.timeValues
        }
        this.getDataEchartsLine(params);
        this.getDataEchartsBar(params);
      },
      // 多级表头 顶部表格
      async getDataTopTable(params){
        let res = await this.axios.post(`${this.testPort}/eservice/dashboard/overview`, params)
        let resData = res.data.data
        this.tableData = resData
      },
      // 联动部分
      changeSelect(){
        this.loadAllCharts()
      },
      changeSelect1(){
        this.loadAllCharts()
      },
      changeTime(){
        this.loadAllCharts()
      },
      echartsResize(){
        setTimeout(() => {
          this.echartsObj.lineECharts.resize()
          this.echartsObj.barECharts.resize()
        },200)
      },
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted(){
      this.initEchartsDom();
      this.loadAllCharts();
      this.getDataTopTable({});
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .DBSummary{
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .table-wrap{}
    .btn-wrap{
      margin:15px 0;
      text-align: center;
      .el-button {
        color: #333;
        background-color: #fff;
        width: 144px;
      }
      .active-btn {
        background-color: #0090e9;
        color: #fff;
      }
    }
    .button-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .button-box{
        margin-right: 15px;
      }
    }
    .eCharts-wrap{
      display: flex;
      margin-top:20px;
      .echarts-part{
        flex: 1;
        .title{
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #333333;
          font-weight:bold;
        }
        .chart{
          width:100%;
          height:35vh;
        }
      }
    }
    .select-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .select-box{
        margin-right: 15px;
      }
    }
    .table-wrap-two{
      margin-top: 15px;
    }
    .eCharts-bottom{
      margin-top:20px;
      .title{
        font-family: PingFang-SC-Bold;
        font-size: 20px;
        color: #333333;
        font-weight:bold;
      }
      .chart{
        width:100%;
        height:40vh;
      }
    }
  }
</style>

